<template>
  <div>
    <yt-crud
      ref="crudRef"
      :data="data"
      :column="column"
      v-model:page="state.page"
      v-model:query="state.query"
      :total="state.total"
      :loading="state.loading"
      :tableProps=" {
        selection: false,
        viewBtn: false,
        menuWidth: 180,
       menuSlot: true,
      }"
      @onLoad="getData"
      @delFun="onDelete"
      @saveFun="onSave"
    >
      <template #menuSlot="scope:any">
        <div class="menu-btn">
          <el-tooltip class="box-item" effect="dark" :content="t('crud.action.configuration')" placement="top">
            <el-button link type="primary" icon="Setting" @click="handleConfig(scope.row)" />
          </el-tooltip>
        </div>
      </template>
      <template #appType="scope:any">
        <DictTag :options="AppTypeEnum" :value="scope.row.appType" />
      </template>
      <template #status="scope:any">
        <el-switch v-model="scope.row.status" active-value="Enabled" inactive-value="Disabled" @change="handleStatusChange(scope.row)" />
      </template>
    </yt-crud>

    <WechatConfig ref="wechatRef" @success="handleSuccess" />
    <AppConfig ref="appRef" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'

import YtCrud from '@/components/common/yt-crud.vue'
import { listApp, addApp, delApp, updateApp, changeStatus } from '@/api/system/app'
import { AppVO } from '@/api/system/app/types'
import {ComponentInternalInstance} from 'vue'
import {useI18n} from 'vue-i18n'

import WechatConfig from './modules/WechatConfig.vue'
import AppConfig from './modules/AppConfig.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { AppTypeEnum, EnableStatusEnum } = toRefs<any>(proxy?.useEnum('app_type_enum', 'enable_status_enum'))
const { t } = useI18n()

const wechatRef = ref()
const appRef = ref()

const state = reactive({
  total: 0,
  page: {
    pageSize: 10,
    pageNum: 1,
  },
  query: {},
  loading: false,
})


const column: IColumn[] = [
  {
    label: t('system.app.appName'),
    key: 'appName',
    search: true,
    rules: [{ required: true, message: t('system.app.validator.appName') }],
  },
  {
    label: t('system.app.appId'),
    key: 'appId',
    search: true,
    formHide: true,
    rules: [{ required: true, message: t('system.app.validator.appId') }],
  },
  {
    label: t('system.app.appSecret'),
    key: 'appSecret',
    search: false,
    hide:true,
    formHide: true,
    rules: [{ required: true, message: t('system.app.validator.appSecret') }],
  },
  {
    label: t('system.app.appType'),
    key: 'appType',
    type: 'select',
    editDisabled: true,
    componentProps: {
      options: AppTypeEnum,
    },
    search: true,
    slot: true,
  },
  {
    label: t('system.app.status'),
    key: 'status',
    type: 'select',
    componentProps: {
      options: EnableStatusEnum,
    },
    search: true,
    formHide: true,
    slot: true,
  },
  {
    label: t('crud.table.column.note'),
    key: 'note',
    hide: true,
    formHide: false,
    colSpan: 22,
    componentProps: {
      type: 'textarea',
      rows: 5,
    }
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'createTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
  },
]

const data = ref<AppVO[]>([])

const onSave = async ({ data, cancel }: any) => {
  state.loading = true
  data.id ? await updateApp(toRaw(data)) : await addApp(toRaw(data))
  state.loading = false
  cancel()
  await getData()
}

const onDelete = async (row: any) => {
  state.loading = true
  await delApp(row.id)
  ElMessage.success(t('operate.tooltip.success'))
  state.loading = false
  getData()
}

const getData = async () => {
  state.loading = true
  listApp({
    ...state.page,
    ...state.query,
  })
    .then((res) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}

//配置属性
const handleConfig = async (row: any) => {
  if(row.appType === 'Wechat') {
    wechatRef.value.openDialog(row)
  } else if(row.appType === 'App') {
    appRef.value.openDialog(row)
  } else {
    ElMessage.warning(t('operate.tooltip.not_configuration'))
  }
}


/** 状态修改  */
const handleStatusChange = async (row: any) => {
  if(!row.id)  return
  try {
    await proxy?.$modal.confirm(row.status === 'Enabled' ? t('crud.action.tooltip.enable') : t('crud.action.tooltip.disabled'))
    await changeStatus(row.id, row.status)
    ElMessage.success(t('operate.tooltip.success'))
    getData()
  } catch (err) {
    row.status = row.status === 'Enabled' ? 'Disabled' : 'Enabled'
  }
}

const handleSuccess = ()=>{
  getData()
}
</script>
